<template>
  <div class="title">NextTick()函数使用</div>
    <div class="unitBar inner">
        <span class="spanTest">页面显示的值：&nbsp;</span><span class="test">{{ jsonStrtest }}</span>
        <button @click="changeStrtest">点击显示下一个值</button>
         <button @click="changeNextTick">点击nextTick</button>
    </div>
</template>

<script setup>
import {nextTick, onUpdated, ref} from 'vue'
let jsonStrtest=ref('8 9 10');
function changeStrtest () {
    jsonStrtest.value='J Q K';
    console.log('@changeStrtest',document.querySelector('span.test').innerHTML); //由于响应式变量异步的原因 打印初始赋值
}
function changeNextTick(){
    jsonStrtest.value='J Q K';
    nextTick(()=>{
    console.log('@nextTick-nextTick',document.querySelector('span.test').innerHTML); //打印的和onUpdated()一样是已更新后的值
})
}
nextTick(()=>{
    console.log('@nextTick-setup',document.querySelector('span.test').innerHTML); //页面打开立即打印并只打印一次，因为初始赋值改变了视图，触发函数
})
onUpdated(()=>{
    // console.log('@onUpdated',document.querySelector('span.test').innerHTML); 
}) 
</script>

<style scoped>
</style>